<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>朋友圈搞笑文案</title>
    <link rel="stylesheet" href="../css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #f5f2eb;
            font-family: "Ma Shan Zheng", cursive, serif;
            color: #333;
            font-size: 18px;
            line-height: 2;
        }
        .letter-card {
            max-width: 800px;
            margin: 50px auto;
            padding: 60px 80px;
            background: #fff url() repeat;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            position: relative;
        }
        .letter-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 15px;
            background-color: #d4b886;
            border-radius: 0 0 15px 15px;
        }
        .card-title {
            text-align: center;
            font-size: 28px;
            color: #8b5a2b;
            margin-bottom: 30px;
            letter-spacing: 2px;
        }
        .card-content p {
            margin-bottom: 15px;
            padding-left: 10px;
            position: relative;
        }
        .card-content p::before {
            content: "✦";
            color: #d4b886;
            position: absolute;
            left: -15px;
        }
        .btn-group {
            position: fixed;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .func-btn {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            border: 2px solid #8b5a2b;
            background-color: #fff;
            color: #8b5a2b;
            font-size: 22px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .func-btn:hover {
            background-color: #8b5a2b;
            color: #fff;
        }
        .export-btn {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="letter-card" id="exportTarget" contenteditable="true">
        <h2 class="card-title">朋友圈快乐碎片</h2>
        <div class="card-content">
            <p>上班挣的不是工资，是“精神损失费”没错了。</p>
            <p>老板画的饼太大，我噎得说不出话。</p>
            <p>我的运动量：下楼拿外卖+床上翻身。</p>
            <p>工资到账像富翁，打开还款软件变穷光蛋。</p>
            <p>线上段子手，线下“哑巴新娘”实锤。</p>
            <p>体重计总碰瓷我，明明是它不准。</p>
            <p>没有咖啡的我，像只剩1%电的手机。</p>
            <p>家里供不起我上班了，比上学还费钱。</p>
            <p>我的人生：大型情景喜剧实录。</p>
            <p>间接性踌躇满志，持续性混吃等死。</p>
            <p>工作群一响，心跳先加速三秒。</p>
            <p>记忆力堪比金鱼，刚想说啥来着？</p>
        </div>
    </div>

    <div class="btn-group">
        <button class="func-btn" id="zoomIn">+</button>
        <button class="func-btn" id="zoomOut">-</button>
        <button class="func-btn export-btn" id="exportImg" title="导出长图">↓</button>
    </div>

    <script src="../js/html2canvas.min.js"></script>
    <script>
        const zoomIn = document.getElementById('zoomIn'),
              zoomOut = document.getElementById('zoomOut'),
              exportImg = document.getElementById('exportImg');

        zoomIn.addEventListener('click', () => {
            const size = parseInt(getComputedStyle(document.body).fontSize);
            document.body.style.fontSize = `${size + 2}px`;
        });

        zoomOut.addEventListener('click', () => {
            const size = parseInt(getComputedStyle(document.body).fontSize);
            size > 14 && (document.body.style.fontSize = `${size - 2}px`);
        });

        exportImg.addEventListener('click', () => {
            html2canvas(document.getElementById('exportTarget'), { 
                scale: 2, 
                useCORS: true 
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = '朋友圈搞笑文案.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        });
    </script>
</body>
</html>
